@use 'tailwindcss/base';
@use 'tailwindcss/components';
@use 'tailwindcss/utilities';

@layer components {
  .raw-btn {
    // 注意 after: 后面不能加任何空格，有些格式化工具可能会在这里自动加一个空格
    @apply after:border-none inline-flex items-center gap-2 rounded text-sm font-semibold transition-all;
  }

  .btn2 {
    // 使用上面定义的 raw-btn
    @apply raw-btn bg-gradient-to-r from-[#9e58e9] to-blue-500 px-2 py-1 text-white;
  }

  .btn {
    // 填充
    @apply border-primary bg-primary text-onPrimary dark:border-primary-dark dark:bg-primary-dark;
  }

  .btn-hover {
    @apply bg-primary-hover dark:bg-primary-dark-hover;
  }
}